<template>
  <div>
    <el-container>
        <el-header>
          <span>连接池：</span>
          <el-select v-model="datasourceId" @change="rDsChange">
            <el-option
              v-for="datasource in jdbcDatasource"
              :key="datasource.id"
              :label="datasource.datasourceName"
              :value="datasource.id">
            </el-option>
          </el-select>
          <el-button type="primary" icon="el-icon-coin" @click="addTab(editableTabsValue)">新建SQL窗口</el-button>
        </el-header>

      <el-container style="height: 100%">
        <el-aside style="background-color: #eef1f600">
          <el-input v-model="search" size="mini" suffix-icon="el-icon-search"></el-input>
          <el-table :data="wTbList.filter(data => !search || data.tableName.toLowerCase().includes(search.toLowerCase()))"
                    border
                    size="mini"
                    :show-header="false">
            <el-table-column  prop="tableName" style="padding: 0px;">
            </el-table-column>
          </el-table>
        </el-aside>
        <el-container>
          <el-tabs v-model="editableTabsValue" type="card" closable  @tab-remove="removeTab" style="width: 90%">
            <el-tab-pane
              :key="item.name"
              v-for="(item, index) in editableTabs"
              :label="item.title"
              :name="item.name"
            >
              <Content :datasourceId="datasourceId"></Content>
            </el-tab-pane>
          </el-tabs>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { list as jdbcDsList } from '@/api/datax-jdbcDatasource'
import * as dsQueryApi from '@/api/metadata-query'
import Content from "./content";

export default {
  name: 'Database',
  components: {
    Content
  },
  data() {
    return {
      wTbList: [],
      search: undefined,
      tableData: [],
      tableName: undefined,
      textareaSQL: undefined,
      datasourceId: undefined,
      jdbcDatasource: [],
      datasourceObj: undefined,
      editableTabsValue: '1',
      editableTabs: [{
        title: 'SQL窗口',
        name: '1',
        content: undefined
      }],
      jdbcDsQuery: {
        current: 1,
        size: 200,
        ascs: 'datasource_name'
      },
      tabIndex: 2
    }
  },
  created() {
    this.getJdbcDs()
  },

  methods: {
    arr2ObjArr(arr) {
      let objArr = []
      for (let i = 0,obj = {}; i < arr.length; i++) {
        obj = {
          tableName: arr[i],
        }
        objArr.push(obj)
      }
      return objArr
    },
    // 获取可用数据源
    getJdbcDs() {
      jdbcDsList(this.jdbcDsQuery).then(response => {
        const { records } = response
        this.jdbcDatasource = records
      })
    },
    rDsChange(e) {
      this.jdbcDatasource.find((item)=>{
          if (item.id === e) {
              this.datasourceObj = item
          }
      })
      this.getTables('writer',this.datasourceObj)
    },
    // 获取表名
    getTables(type, row) {
      if (type === 'writer') {
        let obj = {}
        if (row.dataSource === 'postgresql' || row.dataSource === 'oracle' || row.dataSource === 'sqlserver') {
          obj = {
            datasourceId: row.id,
            tableSchema: 'public'
          }
        } else {
          obj = {
            datasourceId: row.id
          }
        }
        // 组装
        dsQueryApi.getTables(obj).then(response => {
            this.wTbList = this.arr2ObjArr(response)
        })
      }
    },
    addTab(targetName) {
      let newTabName = ++this.tabIndex + '';
      this.editableTabs.push({
        title: 'SQL窗口',
        name: newTabName,
      });
      this.editableTabsValue = newTabName;
    },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    }

  }
}
</script>

<style scoped>
  .el-header, .el-footer {
    color: #333;
    text-align: left;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
    text-align: center;
    line-height: 50px;
    margin-right: 10px;
  }

  .el-main {
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
